import { useEffect , useState } from 'react'
import Taro from '@tarojs/taro';
import {useDidShow} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import {connect} from 'react-redux';
import NavBar from '../../component/navbar/index';
import {Request,getGlobalData} from '../../util';
import Styles from "./index.module.less";
import Triangle from '../../images/index/rTriangle.png';
import Goods from '../../component/goods/index';

function index(props) {

    const domain = getGlobalData('domain');

    const navBarHeight = Taro.getStorageSync("navBarHeight");

    const [bannerUrl, setBannerUrl] = useState("");
    const [treatmentCategories, setTreatmentCategories] = useState([]);
    const [treatments,setTreatments] = useState([]);

    //获取Banner图
    const getBanner = () => {
        Request(domain+"/client/image/getBanner").then((res)=>{
            setBannerUrl(res.data.data.url_1);
        });
    }

    //获取所有的疗程分类信息
    const getTreatmentCategories = () => {
        Request(domain+"/client/treatmentCategory/allTreatmentCategories").then((res)=>{
            setTreatmentCategories(res.data.data);
        });
    }

    //获取所有的疗程
    const getTreatments = () => {
        Request(domain+"/client/treatment/treatmentListForHome").then((res)=>{
           
            let newRes =[];
            let j=0;
            for(let i in res.data.data){
                newRes[j] = res.data.data[i],
                newRes[j].category = i,
                j++
            }
            
            setTreatments(newRes);
       
        });
    }


    useDidShow(()=>{
        props.sendTabBarID();
        getBanner(); //获取Banner图
        getTreatmentCategories();//获取所有的疗程分类信息
        getTreatments();//获取所有的疗程
    })

    const handleMoreBtn = (category) => {
        Taro.setStorageSync("selectedCategory", category);
        Taro.switchTab({
            url:"/pages/list/index"
        })
    }

    return (
        <view>
            {/* 导航栏 */}
            <NavBar/>

            {/* Banner */}
            <image src={bannerUrl} class={Styles.banner}  style={{marginTop:navBarHeight}} onClick={()=>{
                Taro.navigateTo({
                    url:"/pages/gift/index"
                })
            }}/>

            {/* 疗程分类 */}
            <view class={Styles.treatmentCategory}>
                <view class={Styles.header}>
                    <view class={Styles.line}>
                        <view class={Styles.text}>各项疗程</view>
                    </view>
                </view>
                <view class={Styles.category}>
                    {
                        treatmentCategories.map((item,key)=>{
                            return (
                                <view class={Styles.item} onClick={()=>{
                                    handleMoreBtn(item.name)
                                }}>
                                    <image src={item.image_url} class={Styles.img} />
                                    <Text class={Styles.txt}>{item.name}</Text>
                                </view>
                            )
                        })
                    }
                </view>
            </view>

            {/* 疗程 */}
            {
               
                treatments.map((val,index)=>{
                    return (
                        <view class={Styles.treatments}>
                            <view class={Styles.header}>
                                <view class={Styles.line}>
                                    <view class={Styles.text}>{val.category}</view>
                                </view>
                            </view>

                            <view class={Styles.more} onClick={()=>{
                                handleMoreBtn(val.category)
                            }}>
                                <Text class={Styles.txt}>更多</Text>
                                <image class={Styles.img} src={Triangle}/>
                            </view>

                            <view class={Styles.treatment}>
                                {
                                    val.map((m,n)=>{
                                        return (
                                            <Goods image={m.thumb_url} name={m.name} price={m.new_price} mins={m.mins}/>
                                        )
                                    })
                                }
                            </view>

                        </view>
                    )
                })
            }

        </view>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendTabBarID:()=>{
            dispatch({
                type:"INDEX"
            })
        }
    }
}

export default connect(null,mapDispatchToProps)(index);